<template>
  <div class=" pt-[10px]">
    <CustomTitle title="分析概况"></CustomTitle>
    <!-- <div class="w-[410px] h-[320px] bg-[#1B1B1B] mt-[10px] rounded-[10px]"> -->
    <div class="w-full h-[320px] bg-[#1B1B1B] mt-[10px] rounded-[10px]">
      <a-select v-model:value="time_type" style="width: 140px; margin: 20px 0 0 20px" @change="$emit('change', time_type)">
        <a-select-option :value="7">近一周数据</a-select-option>
        <a-select-option :value="1">本日数据</a-select-option>
        <a-select-option :value="30">近一月数据</a-select-option>
      </a-select>
      <div class="flex items-center relative">
        <PieCharts width="390" height="240" ref="chartsRef" />
        <div
          class="absolute text-white left-[152px] top-[77px] flex flex-col items-center justify-center border-[4px] border-[#FF9F00] w-[86px] h-[86px] rounded-[100%]"
        >
          <div class="text-[26px]">{{ data.total_cnt }}</div>
          <div class="text-[12px]">分析总数</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { iAnalysisStatistic } from '@/interface/iAnalysisStatistic';
const emit = defineEmits<{ (event: 'change', days: number): void }>();
const props = defineProps<{ data: iAnalysisStatistic['analysis_overview'] }>();
const time_type = ref(1);

const chartsRef = ref();
onBeforeMount(() => {
  emit('change', time_type.value);
});
watch(
  () => props.data,
  val => {
    if (val) {
      const option: echarts.EChartsOption = chartsRef.value.getOptions();

      (option.series as any)![0].left = '0%';
      (option.series as any)![0].top = '0%';
      (option.series as any)![0].radius = ['40%', '60%'];
      (option.series as any)![0].emphasis = {
        disabled: true,
      };
      (option.legend as any) = { show: false };
      (option.series as any)![0].data = [
        {
          // name: `总分析 ${val.total_cnt}`,
          name: `总分析`,
          value: val.total_cnt - val.abnormal_cnt,
        },
        {
          // name: `异常 ${val.abnormal_cnt}`,
          name: `异常`,
          value: val.abnormal_cnt,
        },
      ];
      (option.series as any)![0].itemStyle = {
        normal: {
          color: function (colors: any) {
            var colorList = ['#5AD8A6', '#F83253'];
            return colorList[colors.dataIndex];
          },
        },
      };
      (option.series as any)![0].label = {
        show: true,
        color: 'white',
        formatter: '{d}% {b}\n 数量：{c}  ',
      };
      (option as any).tooltip = {
        trigger: 'item',

        formatter: () => {
          return ``;
          // return 123;
        },
      };
      chartsRef.value.setOptions(option);
    }
  }
);
</script>
<style lang="scss" scoped></style>
